<template>
	<div class="main-m">
		<slot name="write-article"> </slot>

		<ul v-infinite-scroll="load" :infinite-scroll-disabled="disabled" infinite-scroll-immediate>
			<transition-group enter-active-class="animate__animated animate__fadeIn">
				<BlogItem :blogItem="item" v-for="item in blogList" :key="item.blog_id"></BlogItem>
			</transition-group>
			<Loading v-if="loading"></Loading>
			<NoMore v-if="noMore"></NoMore>
		</ul>
	</div>
</template>

<script setup lang="ts">
import BlogItem from "./blogItem.vue";
import { ref, computed, type Ref, provide } from "vue";
import { getBlogList } from "@/api/blog";
import NoMore from "../../../components/noMore.vue";

const loading = ref(false);
const count = ref(-1);
const noMore = computed(() => blogList.value.length >= count.value && count.value != -1);
const disabled = computed(() => loading.value || noMore.value);
let num = 1;
const blogList: Ref<blogItemType[]> = ref([]);
provide("blogList", blogList);
const load = async () => {
	loading.value = true;
	try {
		const { data } = await getBlogList(num++, 10);
		blogList.value = [...blogList.value, ...data.data.rows];
		count.value = data.data.count;
	} finally {
		loading.value = false;
	}
};
load();
</script>

<style scoped lang="scss">
.main-m {
	flex: 8;
	border-radius: 2px;
	margin-right: 10px;
}
</style>
